<template>
  <div>
    <el-form
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        padding: 20px;
        background-color: #fff;
      "
    >
     <div class="tip" style="margin-top: 50px;">询价清单及要求</div>
     <div class="tip2">
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户ID">
            <el-input
              v-model="freightInquiry.relation_sn"
              placeholder="请输入账号"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="询价编码">
            <el-input
              v-model="freightInquiry.customer_id"
              placeholder="请输入"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="询价日期">
            <el-date-picker
              v-model="freightInquiry.inquiry_date"
              type="date"
              placeholder="下拉选择日期"
              clearable
              style="width: 85%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物种类">
            <el-input
              v-model="freightInquiry.type_of_goods"
              placeholder="单行输入"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="运输方式:">
            <el-select
              v-model="freightInquiry.mode_of_transport"
              style="width: 85%"
              placeholder="海运/铁路/公路/空运/多联式/散货"
            >
              <el-option
                v-for="item in marketOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="航线选择:">
            <el-select
              v-model="freightInquiry.route"
              style="width: 85%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in routeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="起运港">
            <el-input
              v-model="freightInquiry.port_of_departure"
              placeholder="默认 上海"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的港">
            <el-input
              v-model="freightInquiry.port_of_destination"
              placeholder="请输入"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="报价条款:">
            <el-select
              v-model="freightInquiry.quotation_terms"
              style="width: 85%"
              placeholder="CFR/CIF/DDU/DAP/DDP/其他"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物描述">
            <el-input
              v-model="freightInquiry.goods_desc"
              placeholder="请输入"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="HS编码">
            <el-input
              v-model="freightInquiry.hs_code"
              placeholder="默认 84749000"
              style="width: 85%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="柜型选择:">
            <el-select
              v-model="freightInquiry.cabinet_type"
              style="width: 85%"
              placeholder="拼箱/20GP/40GP/20HQ/40HQ/20FR/40FR/"
            >
              <el-option
                v-for="item in boxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      </div>


<el-form
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        padding: 20px;
        background-color: #fff;
      "
    ></el-form>

 <div class="tip" style="margin-top: 50px; margin-bottom: 30px;">产品信息</div>

    <el-table :data="tableData" style="width: 1000px ;margin: auto;" stripe border>
      <el-table-column prop="product_number" label="产品编号" width="140" header-align="center" />
      <el-table-column prop="product_name" label="产品名称" width="140" header-align="center" />
      <el-table-column prop="pieces" label="总件数" width="180" header-align="center">
        <template v-slot="{row}">
          <el-input-number v-model="row.pieces"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="gross_weight" label="总毛重(kg)" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.gross_weight"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="volume" label="总体积(CBM)" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.volume"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="support_number" label="总托数" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.support_number"></el-input-number>
        
        </template>
      </el-table-column>
      </el-table>

      <div style="margin-top: 20px; text-align: center">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </el-form>
    <div>
  
    </div>
  </div>

</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
//引入api接口
import {
  queryFreightInquiry,
  addFreightInquiry
} from "@/api/freightInquiry.js";
import { ElMessage } from "element-plus";

//路由选项
const router = useRouter();

// 部门选项
const marketOptions = [
  { value: "海运", label: "海运" },
  { value: "铁路", label: "铁路" },
  { value: "公路", label: "公路" },
  { value: "空运", label: "空运" },
  { value: "多联式", label: "多联式" },
  { value: "散货", label: "散货" }
];

//航线选项
const routeOptions = [
  { value: "中国-北美", label: "中国-北美" },
  { value: "中国-美加", label: "中国-美加" },
  { value: "中国-欧洲", label: "中国-欧洲" }
];
//报价条款
const roleOptions = [
  { value: "1", label: "CFR" },
  { value: "2", label: "CIF" },
  { value: "3", label: "DDU" },
  { value: "4", label: "DAP" },
  { value: "5", label: "DDP" },
  { value: "6", label: "其他" }
];
//柜型选择
const boxOptions = [
  { value: "拼箱", label: "拼箱" },
  { value: "20GP", label: "20GP" },
  { value: "40GP", label: "40GP" },
  { value: "20HQ", label: "20HQ" },
  { value: "40HQ", label: "40HQ" },
  { value: "20FR", label: "20FR" },
  { value: "40FR", label: "40FR" }
];

//表单对象
const freightInquiry = ref({
  relation_sn: "",
  customer_id: "",
  customer_name: "",
  inquiry_date: "",
  type_of_goods: "",
  mode_of_transport: "",
  route: "",
  port_of_departure: "",
  port_of_destination: "",
  quotation_terms: "",
  goods_desc: "",
  hs_code: "",
  cabinet_type: "",
  destination: "",
  estimate_value: "",
  tariff_ratio: "",
  ocean_freight: "",
  customs_clearance: "",
  dispatch: ""
});

//保存
async function save() {
  console.log(freightInquiry.value);
  //保存
  let res = await addFreightInquiry(freightInquiry.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  }
}

//查看

//取消
function close() {
  router.push("/freightInquiry/list");
}
</script>

<style scoped>

.tip{
  width: 1000px;
  margin: auto;
  height: 60px;
  line-height: 60px;
  border: #ccc solid 2px;
  padding-left: 40px;
}
.tip2{
  width: 1000px;
  margin: auto;
  border: #ccc solid 1px;
  padding-left: 40px;
  margin-top: 5px;
}





</style>
